<template>
  <el-container class="box">
    <el-aside width="200px">
      <el-menu
          :default-active="state.activePath"
          class="el-menu-vertical-demo"
          :router="true"
          :default-openeds="state.opened"
          @open="handleOpen"
          @close="handleClose"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409eff"
      >
        <el-sub-menu :index="item.id+''" v-for="(item, index) in state.list" :key="index">
          <template #title>
            <el-icon v-if="item.id === 1">
              <Location/>
            </el-icon>
            <el-icon v-else-if="item.id === 3">
              <Sunny/>
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item :index="'/'+sub.path" v-for="(sub, index) in item.children" @click="saveNavState('/'+sub.path)" :key="index">
            <template #title>
              <el-icon v-if="sub.id === 2">
                <Setting/>
              </el-icon>
              <el-icon v-if="sub.id === 4">
                <Flag/>
              </el-icon>
              <el-icon v-if="sub.id === 5">
                <Moon/>
              </el-icon>
              <span>{{ sub.name }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-aside>
    <el-container>
<!--      <el-header></el-header>-->
      <el-main>
        <RouterView/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import {reactive} from 'vue';
import {
  Moon,
  Flag,
  Sunny,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const state = reactive({
  isCollapse: false,
  activePath: "",
  list: [
    {
      id: 1,
      name: "数据概览",
      children: [
        {
          id: 2,
          path: "dashboard",
          name: "数据面板"
        },
      ]
    }, {
      id: 3,
      name: "数据采集",
      children: [
        {
          id: 4,
          path: "tags",
          name: "标签数据"
        }, {
          id: 5,
          path: "detail_list",
          name: "问题数据"
        }
      ]
    }
  ],
  opened: ['1', '3']
})

const saveNavState = async (path) => {
  state.activePath = path;
}

const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
}
</script>

<style lang="less" scoped>
.box {
  height: 100vh;
}
.el-aside {
  background-color: #333744;

  .el-menu {
    border-right: none; /*取消不对其的框框*/
  }
}
</style>
